<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="./todo.css" />
  </head>

  <body>
    <div class="todo">
      <div class="bg1">
        <h1 class="h1">TO DO !</h1>
        <input type="text" placeholder="开始制定计划吧...." id="add" />
        <!-- <div id="btn">Press Enter</div> -->
        <button id="btn">add</button>
      </div>
      <div class="list" id="tododata">
        <ul>
          <!-- 动态生成类似这样的标签 -->
          <!-- <li>
          <div class="main">
            <p>111</p>
            <a href="#" class="down">Down</a>
            <a href="#" class="revise">Revise</a>
          </div>
          <a href="javascript:;" class="close">
            <img src="./close.png" alt="">
          </a>
        </li>
        <li>222 <a href="#">删除</a></li>
        <li>333 <a href="#">删除</a></li> -->
        </ul>
      </div>
      <div class="downlist">
        <div class="linebox" id="downdata">
          <div class="line">
            <div class="contxt">xxxx</div>
            <a href="javascript:;" class="closebtn"
              ><img src="./close.png" alt=""
            /></a>
          </div>
        </div>
      </div>
    </div>
    <script>
      var todolist = [];
      /* 初始化列表数据 */
      $.ajax({
        type: 'get',
        url: 'http://localhost:3000/todo',
        success: function (data) {
          console.log(data);
          todolist = data;
          showlist(todolist);
        },
      });

      /* 列表渲染 */
      function showlist(todolist) {
        /* 任务列表 */
        let tododata = todolist.filter((ele) => {
          return ele.status == '0';
        });
        /* 完成列表 */
        let downdata = todolist.filter((ele) => {
          return ele.status != '0';
        });
        var html1 = '';
        tododata.forEach((ele) => {
          html1 += ` <li id=${ele.id}>
          <div class="main">
            <p>${ele.content}</p>
            <a href="javascript:;" class="down">Down</a>
            <a href="javascript:;" class="revise">Revise</a>
          </div>
          <a href="javascript:;" class="close">
            <img src="./close.png" alt="">
          </a>
        </li>`;
        });
        $('#tododata ul').html(html1);
        var html2 = '';
        downdata.forEach((ele) => {
          html2 += `<div class="line" id=${ele.id}>
          <div class="contxt">${ele.content}</div>
          <a href="javascript:;" class="closebtn"><img src="./close.png" alt=""></a>
        </div>`;
        });
        $('#downdata').html(html2);
      }
      /* 修改 */
      $('#tododata').on('click', '.revise', function () {
        var txt = $(this).siblings('p').html(); /* 获得文本信息 */
        var id = $(this).parents('li').attr('id'); /* 获得任务id */
        console.log($(this).text());
        if ($(this).html() == 'Revise') {
          $(this).text('Save');

          $(this).siblings('p').html(`<input value=${txt}></input>`);
        } else {
          var _this = $(this);
          var newtxt = $(this).siblings('p').find('input').val();
          if (newtxt == '') {
            alert('请将内容填写完整');
          } else {
            let findindex = todolist.findIndex((ele) => {
              return ele.id == id;
            });
            $.ajax({
              type: 'put',
              url: `http://localhost:3000/todo/${id}`,
              data: {
                content: newtxt,
                id: id,
                status: todolist[findindex].status,
              },
              success: function (data) {
                console.log(data);
                if (data.code == '000') {
                  alert('已经成功修改啦，开始 TO DO吧!');
                  _this.text('Revise');
                  _this.siblings('p').html(newtxt);
                  todolist[findindex].content = newtxt; /* 修改数据 */
                }
              },
            });
          }
        }
      });
      /* 添加数据 */
      $('#btn').click(function () {
        var txt = $('#add').val();
        if (txt == '') {
          alert('请将数据填写完整');
        } else {
          $.ajax({
            type: 'post',
            url: `http://localhost:3000/todo/`,
            data: {
              content: txt,
              status: '0',
            },
            success: function (data) {
              console.log(data);
              if (data.code == '000') {
                alert('已经成功添加啦，开始 TO DO吧!');
                todolist.push(data.message);
                showlist(todolist);
              }
            },
          });
        }
      });
      /* 修改状态为已完成 */
      $('#tododata').on('click', '.down', function () {
        var id = $(this).parents('li').attr('id'); /* 获得任务id */
        var txt = $(this).siblings('p').html();
        $.ajax({
          type: 'put',
          url: `http://localhost:3000/todo/${id}`,
          data: {
            status: '1',
            content: txt,
            id: id,
          },
          success: function (data) {
            console.log(data);
            if (data.code == '000') {
              alert('已经成功修改啦，开始 TO DO吧!');
              /* 获得对应id的数组位置 */
              let findindex = todolist.findIndex((ele) => {
                return ele.id == id;
              });
              todolist[findindex].status = '1';
              showlist(todolist);
            }
          },
        });
      });
      /* 删除数据(任务列表) */
      $('#tododata').on('click', '.close', function () {
        var id = $(this).parents('li').attr('id'); /* 获得任务id */
        let findindex = todolist.findIndex((ele) => {
          return ele.id == id;
        });
        $.ajax({
          type: 'delete',
          url: `http://localhost:3000/todo/${id}`,
          data: {
            id: id,
          },
          success: function (data) {
            console.log(data);
            if (data.code == '000') {
              alert('删除成功啦，下次记得也要制定计划哦！');
              todolist.splice(findindex, 1);
              showlist(todolist);
            }
          },
        });
      });
      /* 删除数据（完成列表） */
      $('#downdata').on('click', '.closebtn', function () {
        var id = $(this).parents('.line').attr('id'); /* 获得任务id */
        let findindex = todolist.findIndex((ele) => {
          return ele.id == id;
        });
        console.log(findindex);
        $.ajax({
          type: 'delete',
          url: `http://localhost:3000/todo/${id}`,
          data: {
            id: id,
          },
          success: function (data) {
            console.log(data);
            if (data.code == '000') {
              alert('删除成功啦，下次记得也要制定计划哦！');
              console.log(todolist);
              todolist.splice(findindex, 1);
              showlist(todolist);
            }
          },
        });
      });
    </script>
  </body>
</html>
